<template>
  <div class="details-container">
    <div class="site_nav">
      <div class="crumb">
        <a href="/gonglve/">旅游攻略</a> &gt; <a href="/gonglve/mdd-bj-0-0-0.html#list">北京</a> &gt;
        <h1>北京</h1>
      </div>
    </div>
    <div class="mdd_img">
      <img
        src="https://p1-q.mafengwo.net/s8/M00/C9/AE/wKgBpVXr_jeAfCkPAAtJANc8s6g17.jpeg?imageMogr2%2Fthumbnail%2F%21230x325r%2Fgravity%2FCenter%2Fcrop%2F%21230x325%2Fquality%2F90"
        alt=""
      />
    </div>
    <div class="middle_de">
      <h1>北京</h1>

      <div class="gl_title">
        <span>故宫</span>
        <span>天安门</span>
        <span>长城</span>
        <span>胡同</span>
        <span>新北京</span>
        <div class="clear"></div>
      </div>
      <div class="jianjie">
        <p>
          <strong>简介</strong>
          北京是黑白照片上定格的皇城帝都，大气传统，地道的京片子和胡同里斑驳的砖瓦，讲述着古都京城悠悠的历史；沿着北京的中轴线，皇城遗迹依次排开，稳坐在帝都的心脏位置，接受着世界朝圣的目光；离开中轴线，走进胡同小巷，四合院的红砖灰瓦和屋顶鸽子咕咕的叫声，是浓浓的老北京情怀；北京又是流光溢彩的现代都市，林立的高楼，璀璨的夜景，与传统的四九城相得益彰；三里屯酒吧街的闪烁霓虹和798里LOFT工厂的怀旧气息，让北京焕发着前所未有的异彩光芒。北京，是让美梦成真的地方。
        </p>
      </div>
      <div class="th_f">
        <p>带TA游攻略中旅行贴士和照片等信息都来自于旅行者的真实分享，感谢蜂蜂对本攻略的贡献</p>
      </div>
      <div class="feng_list">
        <a href="/u/658466.html" title="钢牙小嘉" target="_blank"
          ><img
            src="https://p1-q.mafengwo.net/s14/M00/12/B8/wKgE2l1O76KAXBPkAABl_ps8B4g61.jpeg?imageMogr2%2Fthumbnail%2F%2116x16r%2Fgravity%2FCenter%2Fcrop%2F%2116x16%2Fquality%2F90"
            alt="钢牙小嘉"
        /></a>
        <a href="/u/9950683.html" title="战熵" target="_blank"
          ><img
            src="https://p1-q.mafengwo.net/s2/M00/DB/59/wKgBpU5sESr1rjE5AACp4e6kbkY90.jpeg?imageMogr2%2Fthumbnail%2F%2116x16r%2Fgravity%2FCenter%2Fcrop%2F%2116x16%2Fquality%2F90"
            alt="战熵"
        /></a>
        <a href="/u/403510.html" title="慈成-最好的安排" target="_blank"
          ><img
            src="https://p1-q.mafengwo.net/s12/M00/EF/04/wKgED1u5dLCAD2KCAAComE8b6BU77.jpeg?imageMogr2%2Fthumbnail%2F%2116x16r%2Fgravity%2FCenter%2Fcrop%2F%2116x16%2Fquality%2F90"
            alt="慈成-最好的安排"
        /></a>
        <a href="/u/594976.html" title="王家猫" target="_blank"
          ><img
            src="https://p1-q.mafengwo.net/s9/M00/97/9E/wKgBs1aoZdyARXtPAAB8WH82DzI91.jpeg?imageMogr2%2Fthumbnail%2F%2116x16r%2Fgravity%2FCenter%2Fcrop%2F%2116x16%2Fquality%2F90"
            alt="王家猫"
        /></a>
        <a href="/u/214341.html" title="Yolanda" target="_blank"
          ><img
            src="https://p1-q.mafengwo.net/s5/M00/E8/90/wKgB21BK7hXU-YaKAABdVz4OUSA08.jpeg?imageMogr2%2Fthumbnail%2F%2116x16r%2Fgravity%2FCenter%2Fcrop%2F%2116x16%2Fquality%2F90"
            alt="Yolanda"
        /></a>
        <a href="/u/347783.html" title="兮然" target="_blank"
          ><img
            src="https://p1-q.mafengwo.net/s10/M00/72/E1/wKgBZ1n9OzKAJ8PvAAC9nzTn5Eg16.jpeg?imageMogr2%2Fthumbnail%2F%2116x16r%2Fgravity%2FCenter%2Fcrop%2F%2116x16%2Fquality%2F90"
            alt="兮然"
        /></a>
        <a href="/u/7798971.html" title="诺奈葵" target="_blank"
          ><img
            src="https://p1-q.mafengwo.net/s6/M00/CD/10/wKgB4lKUzVOAfNhRAAkFkczRNn027.jpeg?imageMogr2%2Fthumbnail%2F%2116x16r%2Fgravity%2FCenter%2Fcrop%2F%2116x16%2Fquality%2F90"
            alt="诺奈葵"
        /></a>
        <a href="/u/413268.html" title="菜夫" target="_blank"
          ><img
            src="https://p1-q.mafengwo.net/s1/M00/57/FF/wKgBm03SC-nkK3aoAAAbymDqOC028.jpeg?imageMogr2%2Fthumbnail%2F%2116x16r%2Fgravity%2FCenter%2Fcrop%2F%2116x16%2Fquality%2F90"
            alt="菜夫"
        /></a>
        <a href="/u/367370.html" title="星空" target="_blank"
          ><img
            src="https://p1-q.mafengwo.net/s1/M00/6B/8B/wKgBm03jXibcHgwbAAATWUusTBc96.jpeg?imageMogr2%2Fthumbnail%2F%2116x16r%2Fgravity%2FCenter%2Fcrop%2F%2116x16%2Fquality%2F90"
            alt="星空"
        /></a>
        <a href="/u/629883.html" title="饕餮来了" target="_blank"
          ><img
            src="https://p1-q.mafengwo.net/s11/M00/46/A3/wKgBEFtYAcKAYeUDAAFSNS1m0dE08.jpeg?imageMogr2%2Fthumbnail%2F%2116x16r%2Fgravity%2FCenter%2Fcrop%2F%2116x16%2Fquality%2F90"
            alt="饕餮来了"
        /></a>
        <a href="/u/498728.html" title="追逐云" target="_blank"
          ><img
            src="https://p1-q.mafengwo.net/s5/M00/0F/60/wKgB3FCmanmAA6p6AAFl4Lu1KYY11.jpeg?imageMogr2%2Fthumbnail%2F%2116x16r%2Fgravity%2FCenter%2Fcrop%2F%2116x16%2Fquality%2F90"
            alt="追逐云"
        /></a>
        <a href="/u/432966.html" title="li_kai_m" target="_blank"
          ><img
            src="https://p1-q.mafengwo.net/s2/M00/7C/EA/wKgBpU5VF5fLckfeAAAPiDbnhHU67.jpeg?imageMogr2%2Fthumbnail%2F%2116x16r%2Fgravity%2FCenter%2Fcrop%2F%2116x16%2Fquality%2F90"
            alt="li_kai_m"
        /></a>
        <a href="/u/19154219.html" title="带TA游用户" target="_blank"
          ><img
            src="https://p1-q.mafengwo.net/s12/M00/35/98/wKgED1uqIreAU9QZAAAXHQMBZ74008.png?imageMogr2%2Fthumbnail%2F%2116x16r%2Fgravity%2FCenter%2Fcrop%2F%2116x16%2Fquality%2F90"
            alt="带TA游用户"
        /></a>
        <a href="/u/465300.html" title="死活不吃番茄" target="_blank"
          ><img
            src="https://b1-q.mafengwo.net/s11/M00/87/4D/wKgBEFtiiJKAP2qqAA9iMGzd7Ac27.jpeg?imageMogr2%2Fthumbnail%2F%2116x16r%2Fgravity%2FCenter%2Fcrop%2F%2116x16%2Fquality%2F90"
            alt="死活不吃番茄"
        /></a>
        <a href="/u/19368294.html" title="慕容秋雨寒" target="_blank"
          ><img
            src="https://p1-q.mafengwo.net/s5/M00/26/A0/wKgB3FCXrkCALg9qAAT7zwtBlGM14.jpeg?imageMogr2%2Fthumbnail%2F%2116x16r%2Fgravity%2FCenter%2Fcrop%2F%2116x16%2Fquality%2F90"
            alt="慕容秋雨寒"
        /></a>
        <a href="/u/17120019.html" title="细小分子" target="_blank"
          ><img
            src="https://p1-q.mafengwo.net/s5/M00/9B/40/wKgB21A2OcD3fhCtAAAQx65gNm085.jpeg?imageMogr2%2Fthumbnail%2F%2116x16r%2Fgravity%2FCenter%2Fcrop%2F%2116x16%2Fquality%2F90"
            alt="细小分子"
        /></a>
        <a href="/u/17195509.html" title="雨轩居士" target="_blank"
          ><img
            src="https://p1-q.mafengwo.net/s5/M00/4B/DF/wKgB3FE33qWAIoG7AACbLO1yHsk782.gif?imageMogr2%2Fthumbnail%2F%2116x16r%2Fgravity%2FCenter%2Fcrop%2F%2116x16%2Fquality%2F90"
            alt="雨轩居士"
        /></a>
        <a href="/u/1008800.html" title="小倍Isaac" target="_blank"
          ><img
            src="https://p1-q.mafengwo.net/s7/M00/56/08/wKgB6lPrH2eAI7SUAAB5WtdoJOI18.jpeg?imageMogr2%2Fthumbnail%2F%2116x16r%2Fgravity%2FCenter%2Fcrop%2F%2116x16%2Fquality%2F90"
            alt="小倍Isaac"
        /></a>
        <a href="/u/484685.html" title="gimoon" target="_blank"
          ><img
            src="https://p1-q.mafengwo.net/s11/M00/67/94/wKgBEFt28keAcxrgAACMjIWxMDA58.jpeg?imageMogr2%2Fthumbnail%2F%2116x16r%2Fgravity%2FCenter%2Fcrop%2F%2116x16%2Fquality%2F90"
            alt="gimoon"
        /></a>
        <a href="/u/307730.html" title="安生(anson)" target="_blank"
          ><img
            src="https://p1-q.mafengwo.net/s4/M00/E5/E3/wKgByU_SBlqHxR6PAACBHDK5bkw87.jpeg?imageMogr2%2Fthumbnail%2F%2116x16r%2Fgravity%2FCenter%2Fcrop%2F%2116x16%2Fquality%2F90"
            alt="安生(anson)"
        /></a>
        <a href="/u/19064440.html" title="小班儿" target="_blank"
          ><img
            src="https://p1-q.mafengwo.net/s3/M00/E7/AE/wKgBjE895e7-C6h5AAAT8KOQ_VQ29.jpeg?imageMogr2%2Fthumbnail%2F%2116x16r%2Fgravity%2FCenter%2Fcrop%2F%2116x16%2Fquality%2F90"
            alt="小班儿"
        /></a>
        <a href="/u/19105182.html" title="大猫" target="_blank"
          ><img
            src="https://p1-q.mafengwo.net/s6/M00/6E/7A/wKgB4lOj2X2AA2b4AAFxxschaKU18.jpeg?imageMogr2%2Fthumbnail%2F%2116x16r%2Fgravity%2FCenter%2Fcrop%2F%2116x16%2Fquality%2F90"
            alt="大猫"
        /></a>
        <a href="/u/295469.html" title="娃娃" target="_blank"
          ><img
            src="https://p1-q.mafengwo.net/s1/M00/0D/10/wKgBm02VxQnRoYk5AAAS9EktiWc56.jpeg?imageMogr2%2Fthumbnail%2F%2116x16r%2Fgravity%2FCenter%2Fcrop%2F%2116x16%2Fquality%2F90"
            alt="娃娃"
        /></a>
        <a href="/u/19088611.html" title="阳光毛毛" target="_blank"
          ><img
            src="https://p1-q.mafengwo.net/s5/M00/93/A1/wKgB3FE0RxKAUIQgAARcsOMbecI08.jpeg?imageMogr2%2Fthumbnail%2F%2116x16r%2Fgravity%2FCenter%2Fcrop%2F%2116x16%2Fquality%2F90"
            alt="阳光毛毛"
        /></a>
        <a href="/u/17223211.html" title="老枪" target="_blank"
          ><img
            src="https://p1-q.mafengwo.net/s4/M00/06/4B/wKgByU_kb8GGomtlAAAx0JTDOlY81.jpeg?imageMogr2%2Fthumbnail%2F%2116x16r%2Fgravity%2FCenter%2Fcrop%2F%2116x16%2Fquality%2F90"
            alt="老枪"
        /></a>
        <a href="/u/236871.html" title="风吹麦浪" target="_blank"
          ><img
            src="https://p1-q.mafengwo.net/s2/M00/29/4D/wKgBpU6MVUyyXiCTAAAV7taJ_CQ90.jpeg?imageMogr2%2Fthumbnail%2F%2116x16r%2Fgravity%2FCenter%2Fcrop%2F%2116x16%2Fquality%2F90"
            alt="风吹麦浪"
        /></a>
        <a href="/u/540587.html" title="鸽子" target="_blank"
          ><img
            src="https://p1-q.mafengwo.net/s2/M00/FB/CE/wKgBpU6haEHyVVr3AAAYHlbNCrM31.jpeg?imageMogr2%2Fthumbnail%2F%2116x16r%2Fgravity%2FCenter%2Fcrop%2F%2116x16%2Fquality%2F90"
            alt="鸽子"
        /></a>
        <a href="/u/435931.html" title="无须豆蔻" target="_blank"
          ><img
            src="https://p1-q.mafengwo.net/s1/M00/4B/08/wKgBm03E2ziLy94TAAAYChFwxew02.jpeg?imageMogr2%2Fthumbnail%2F%2116x16r%2Fgravity%2FCenter%2Fcrop%2F%2116x16%2Fquality%2F90"
            alt="无须豆蔻"
        /></a>
        <a href="/u/3155484.html" title="贝壳女孩" target="_blank"
          ><img
            src="https://p1-q.mafengwo.net/s14/M00/E3/C6/wKgE2l1mQqeAUdi5AA1Bqb6ot5092.jpeg?imageMogr2%2Fthumbnail%2F%2116x16r%2Fgravity%2FCenter%2Fcrop%2F%2116x16%2Fquality%2F90"
            alt="贝壳女孩"
        /></a>
        <a href="/u/191236.html" title="毛线袜子" target="_blank"
          ><img
            src="https://p1-q.mafengwo.net/s10/M00/6A/9D/wKgBZ1hvK5mAfXZdAAwEbJMVsMc28.jpeg?imageMogr2%2Fthumbnail%2F%2116x16r%2Fgravity%2FCenter%2Fcrop%2F%2116x16%2Fquality%2F90"
            alt="毛线袜子"
        /></a>
        <a href="/u/354681.html" title="Nora" target="_blank"
          ><img
            src="https://p1-q.mafengwo.net/s1/M00/10/68/wKgBm02WjCKZ9iNnAAAMHYKPTOQ46.jpeg?imageMogr2%2Fthumbnail%2F%2116x16r%2Fgravity%2FCenter%2Fcrop%2F%2116x16%2Fquality%2F90"
            alt="Nora"
        /></a>
        <a href="/u/17471530.html" title="zhwbbest" target="_blank"
          ><img
            src="https://p1-q.mafengwo.net/s5/M00/56/13/wKgB21BldoqVjn_4AAFy7GuWOwE83.jpeg?imageMogr2%2Fthumbnail%2F%2116x16r%2Fgravity%2FCenter%2Fcrop%2F%2116x16%2Fquality%2F90"
            alt="zhwbbest"
        /></a>
        <a href="/u/5335273.html" title="布衣足行" target="_blank"
          ><img
            src="https://p1-q.mafengwo.net/s5/M00/97/45/wKgB21BoFb3BBA_1AABHgM2JyX012.jpeg?imageMogr2%2Fthumbnail%2F%2116x16r%2Fgravity%2FCenter%2Fcrop%2F%2116x16%2Fquality%2F90"
            alt="布衣足行"
        /></a>
        <div class="clear"></div>
      </div>
    </div>
    <div class="down_glb">
      <h2>4345483<span>人下载</span></h2>
      <div class="down_p">
        <a data-bookid="57" href="javascript:void(0);">下载PDF版本</a>
        <p>文件大小 6.19 MB</p>
      </div>
      <div class="down_p down_p1">
        <a data-bookid="57" href="javascript:void(0);">下载JPG版本</a>
        <p>文件大小 28.58 MB</p>
      </div>
      <div class="up_time">
        <p>更新时间 2016-02-02</p>
      </div>
    </div>
    <div class="clear"></div>
    <div class="box_wrap">
      <el-image
        v-for="(item, index) in srcList"
        :key="index"
        class="img-item"
        :src="item"
        :preview-src-list="srcList"
        :initial-index="index"
        fit="cover"
      />
    </div>
    <div class="gl_l">
      <div class="mdd_zj">
        <h1>直达目的地</h1>
        <div class="mdd_m">
          <h2>
            <a href="/destination/details/1" target="_blank">
              <img
                src="https://p1-q.mafengwo.net/s7/M00/2D/84/wKgB6lSgwh6AfAayAAdJidJk0qU270.png?imageMogr2%2Fthumbnail%2F%21160x120r%2Fgravity%2FCenter%2Fcrop%2F%21160x120%2Fquality%2F90"
                alt="北京"
                width="140"
                height="90"
            /></a>
          </h2>
          <dl>
            <dt><a href="/travel-scenic-spot/mafengwo/10065.html" target="_blank">北京</a></dt>
            <dd><a href="/yj/10065/" target="_blank">游记144943篇</a></dd>
            <dd><a href="/photo/mdd/10065.html" target="_blank">旅行相册</a></dd>
          </dl>
          <div class="clear"></div>
        </div>
      </div>
      <div class="just_down">
        <h2>下载北京旅游攻略的蜂蜂们</h2>
        <ul>
          <li>
            <h3>
              <a href="/u/87587313.html" target="_blank" rel="nofollow" title="吉米的吉呀深圳"
                ><img
                  src="https://p1-q.mafengwo.net/s9/M00/63/17/wKgBs1gnRgiAUr7NAAAFfU2PaPs79.jpeg?imageMogr2%2Fthumbnail%2F%2116x16r%2Fgravity%2FCenter%2Fcrop%2F%2116x16%2Fquality%2F90"
              /></a>
            </h3>

            <p><a href="/u/87587313.html" target="_blank" rel="nofollow">吉米的吉呀</a></p>
            <span>4小时前</span>
          </li>
          <li>
            <h3>
              <a href="/u/93043087.html" target="_blank" rel="nofollow" title="大头鱼南京"
                ><img
                  src="https://p1-q.mafengwo.net/s12/M00/35/6C/wKgED1uqIpCARLIhAAAZUeRPlFM676.png?imageMogr2%2Fthumbnail%2F%2116x16r%2Fgravity%2FCenter%2Fcrop%2F%2116x16%2Fquality%2F90"
              /></a>
            </h3>

            <p><a href="/u/93043087.html" target="_blank" rel="nofollow">大头鱼</a></p>
            <span>5小时前</span>
          </li>
        </ul>
        <div class="clear"></div>
      </div>
      <div class="ff_menu">
        <div class="ff_w">
          <dl>
            <a href="/u/5548398.html" rel="nofollow" title="常掰掰" target="_blank"
              ><img
                src="https://b1-q.mafengwo.net/s5/M00/7B/7F/wKgB3FEW9huADkkWAAA6z4m9zVk17.jpeg?imageMogr2%2Fthumbnail%2F%2116x16r%2Fgravity%2FCenter%2Fcrop%2F%2116x16%2Fquality%2F90"
                alt="常掰掰"
            /></a>
            <a href="/u/5548398.html" rel="nofollow" title="常掰掰" target="_blank"
              ><img
                src="https://b1-q.mafengwo.net/s5/M00/7B/7F/wKgB3FEW9huADkkWAAA6z4m9zVk17.jpeg?imageMogr2%2Fthumbnail%2F%2116x16r%2Fgravity%2FCenter%2Fcrop%2F%2116x16%2Fquality%2F90"
                alt="常掰掰"
            /></a>
            <a href="/u/5548398.html" rel="nofollow" title="常掰掰" target="_blank"
              ><img
                src="https://b1-q.mafengwo.net/s5/M00/7B/7F/wKgB3FEW9huADkkWAAA6z4m9zVk17.jpeg?imageMogr2%2Fthumbnail%2F%2116x16r%2Fgravity%2FCenter%2Fcrop%2F%2116x16%2Fquality%2F90"
                alt="常掰掰"
            /></a>
            <a href="/u/5548398.html" rel="nofollow" title="常掰掰" target="_blank"
              ><img
                src="https://b1-q.mafengwo.net/s5/M00/7B/7F/wKgB3FEW9huADkkWAAA6z4m9zVk17.jpeg?imageMogr2%2Fthumbnail%2F%2116x16r%2Fgravity%2FCenter%2Fcrop%2F%2116x16%2Fquality%2F90"
                alt="常掰掰"
            /></a>
          </dl>
        </div>
        <div class="clear"></div>
      </div>
    </div>
    <div class="gl_r">
      <div class="guess_like">
        <h2>下载了旅游攻略的蜂蜂也喜欢</h2>
        <a href="/gonglve/#list">查看全部</a>
        <div class="clear"></div>
      </div>
      <div class="gl_fw gl_fw1">
        <div class="gl_cw gl_cw1">
          <div class="gl_list">
            <a href="/gonglve/zt-187.html" title="北京滑雪" target="_blank">
              <img
                src="https://p1-q.mafengwo.net/s6/M00/E1/71/wKgB4lKpj1-AGApuAANRYy-SRBU25.jpeg?imageMogr2%2Fthumbnail%2F%21130x184r%2Fgravity%2FCenter%2Fcrop%2F%21130x184%2Fquality%2F90"
                alt="北京滑雪"
              />
            </a>

            <div class="down_cout">
              <span></span>
              <p>228056人下载</p>
            </div>
          </div>
          <div class="gl_list">
            <a href="/gonglve/mdd-10588.html" title="北京欢乐谷" target="_blank">
              <img
                src="https://p1-q.mafengwo.net/s8/M00/9A/54/wKgBpVYXZs2AJVmZAAt8XoQc4qA99.jpeg?imageMogr2%2Fthumbnail%2F%21130x184r%2Fgravity%2FCenter%2Fcrop%2F%21130x184%2Fquality%2F90"
                alt="北京欢乐谷"
              />
            </a>

            <div class="down_cout">
              <span></span>
              <p>189475人下载</p>
            </div>
          </div>
          <div class="gl_list">
            <a href="/gonglve/mdd-10320.html" title="天津" target="_blank">
              <img
                src="https://p1-q.mafengwo.net/s7/M00/5C/9E/wKgB6lOyG2iAOsFYAApUkAmothE87.jpeg?imageMogr2%2Fthumbnail%2F%21130x184r%2Fgravity%2FCenter%2Fcrop%2F%21130x184%2Fquality%2F90"
                alt="天津"
              />
            </a>

            <div class="down_cout">
              <span></span>
              <p>1729789人下载</p>
            </div>
          </div>
          <div class="gl_list">
            <a href="/gonglve/mdd-10495.html" title="箭扣长城" target="_blank">
              <img
                src="https://p1-q.mafengwo.net/s5/M00/BE/C9/wKgB3FHn2feAYBJmAARLDnjSNeU82.jpeg?imageMogr2%2Fthumbnail%2F%21130x184r%2Fgravity%2FCenter%2Fcrop%2F%21130x184%2Fquality%2F90"
                alt="箭扣长城"
              />
            </a>

            <div class="down_cout">
              <span></span>
              <p>254497人下载</p>
            </div>
          </div>
          <div class="clear"></div>
        </div>
      </div>
      <div class="msg_wp">
        <h1>欢迎留言和纠错</h1>
        <form method="" action="">
          <div class="msg_text">
            <textarea id="txt_sub" rows="" cols=""></textarea>
            <a id="btn_sub" href="javascript:;" style="background: rgb(198, 198, 198)">提交</a>
            <div class="clear"></div>
            <input id="chk_err" type="checkbox" name="" value="" class="check_in" />
            <span>这条是纠错(纠错请标明页数，第 <input id="txt_page" type="text" name="" value="" class="pages_in" /> 页 )</span>
            <div class="clear"></div>
          </div>
          <!-- 常见问题-->
          <div class="question">
            <span>常见问题</span>
            <div class="question_link">
              <a href="/i/1240955.html" target="_blank">攻略下载不了怎么办？</a>
              <a href="/i/1240957.html" target="_blank">为什么解压需要密码？</a>
              <a href="/i/1240962.html" target="_blank">攻略打开需要密码？</a>
              <a href="/i/1240964.html" target="_blank">怎么纠错呢？</a>
              <div class="clear"></div>
            </div>
            <!-- <div class="more_toggle">
              <a href="javascript:void(0);" class="more_question">更多</a>
            </div> -->
            <div class="clear"></div>
          </div>
          <!-- end-->
          <div class="wall_caution">
            <b>友情提醒：</b>
            此版块的约伴活动为用户自行发起，建议蜂蜂仔细甄别，以防受骗。
          </div>
          <ul id="wall_ul">
            <li id="reply_area_975172" data-cid="0" data-wid="975172" data-uid="55650615">
              <h3>
                <a href="/u/55650615.html" target="_blank"
                  ><img
                    src="https://p1-q.mafengwo.net/s12/M00/35/6C/wKgED1uqIpCARLIhAAAZUeRPlFM676.png?imageMogr2%2Fthumbnail%2F%2148x48r%2Fgravity%2FCenter%2Fcrop%2F%2148x48%2Fquality%2F90"
                    alt="深圳永耀国际物流"
                /></a>
              </h3>
              <div class="e_con">
                <h4><a href="/u/55650615.html" target="_blank">深圳永耀国际物流</a></h4>
                <span>Lv.3</span>
                <em>2022-07-09 14:09:32</em>
                <div class="clear"></div>
                <p>
                  我们是一家中国邮寄全球的国际物流公司。帮助海外华人代收、集运/转运到国外。免费仓储，下单可直接寄到我司，代收包裹、货齐统一打包，双清包税到门。
                  V：178 7800 6115
                </p>
                <div class="clear"></div>
                <div class="opatation">
                  <div class="clear"></div>
                </div>
              </div>
            </li>
            <li id="reply_area_973883" data-cid="0" data-wid="973883" data-uid="88360545">
              <h3>
                <a href="/u/88360545.html" target="_blank"
                  ><img
                    src="https://p1-q.mafengwo.net/s19/M00/4C/7F/CoNDRGIR9i5Mr9BuAACtoHSjRkc.jpeg?imageMogr2%2Fthumbnail%2F%2148x48r%2Fgravity%2FCenter%2Fcrop%2F%2148x48%2Fquality%2F90"
                    alt="云南旅游定制师"
                /></a>
              </h3>
              <div class="e_con">
                <h4><a href="/u/88360545.html" target="_blank">云南旅游定制师</a></h4>
                <span>Lv.5</span>
                <em>2022-02-20 15:52:30</em>
                <div class="clear"></div>
                <p>
                  专门从事云南旅游路线十余年，为你提供云南各地旅行攻略，教你防坑防骗，抵制低价旅游购物团，为你量身定制各条云南旅游路线，云南各地景区门票及民宿酒店预定，bao车旅行，拼车，自
                  由行接待，公司团建，商务旅 行，各种高端旅游接待，带你打卡网红地， 需要的可以加V：2 8 6 2 7 2 7 7 6（备注带TA游）
                </p>
                <div class="clear"></div>
                <div class="opatation">
                  <div class="clear"></div>
                </div>
              </div>
            </li>
            <li id="reply_area_973569" data-cid="0" data-wid="973569" data-uid="49264020">
              <h3>
                <a href="/u/49264020.html" target="_blank"
                  ><img
                    src="https://p1-q.mafengwo.net/s18/M00/E4/2F/CoUBYGFg_PyAXYBOAAKPqblSpDc55.jpeg?imageMogr2%2Fthumbnail%2F%2148x48r%2Fgravity%2FCenter%2Fcrop%2F%2148x48%2Fquality%2F90"
                    alt="东北户外小月"
                /></a>
              </h3>
              <div class="e_con">
                <h4><a href="/u/49264020.html" target="_blank">东北户外小月</a></h4>
                <span>Lv.18</span>
                <em>2021-12-31 16:08:39</em>
                <div class="clear"></div>
                <p>
                  《自由行散客之家》--微信1368813870<br />
                  哈尔滨一 亚布力一滑雪一冰雪一画廊一风车山庄一龙江第一峰一雪乡一长白山 一雾凇岛<br />
                  篝火晚会.扭秧歌队<br />
                  雪地.摩托拍摄日出<br />
                  免费线路设计.<br />
                  滑雪·散客·自由行<br />
                  不会让你多走一点冤枉路。<br />
                  散客自发组织游玩
                </p>
                <div class="clear"></div>
                <div class="opatation">
                  <div class="clear"></div>
                </div>
              </div>
            </li>
            <li id="reply_area_973568" data-cid="0" data-wid="973568" data-uid="49264020">
              <h3>
                <a href="/u/49264020.html" target="_blank"
                  ><img
                    src="https://p1-q.mafengwo.net/s18/M00/E4/2F/CoUBYGFg_PyAXYBOAAKPqblSpDc55.jpeg?imageMogr2%2Fthumbnail%2F%2148x48r%2Fgravity%2FCenter%2Fcrop%2F%2148x48%2Fquality%2F90"
                    alt="东北户外小月"
                /></a>
              </h3>
              <div class="e_con">
                <h4><a href="/u/49264020.html" target="_blank">东北户外小月</a></h4>
                <span>Lv.18</span>
                <em>2021-12-31 16:08:38</em>
                <div class="clear"></div>
                <p>
                  《自由行散客之家》--微信1368813870<br />
                  哈尔滨一 亚布力一滑雪一冰雪一画廊一风车山庄一龙江第一峰一雪乡一长白山 一雾凇岛<br />
                  篝火晚会.扭秧歌队<br />
                  雪地.摩托拍摄日出<br />
                  免费线路设计.<br />
                  滑雪·散客·自由行<br />
                  不会让你多走一点冤枉路。<br />
                  散客自发组织游玩
                </p>
                <div class="clear"></div>
                <div class="opatation">
                  <div class="clear"></div>
                </div>
              </div>
            </li>
            <li id="reply_area_973566" data-cid="0" data-wid="973566" data-uid="49264020">
              <h3>
                <a href="/u/49264020.html" target="_blank"
                  ><img
                    src="https://p1-q.mafengwo.net/s18/M00/E4/2F/CoUBYGFg_PyAXYBOAAKPqblSpDc55.jpeg?imageMogr2%2Fthumbnail%2F%2148x48r%2Fgravity%2FCenter%2Fcrop%2F%2148x48%2Fquality%2F90"
                    alt="东北户外小月"
                /></a>
              </h3>
              <div class="e_con">
                <h4><a href="/u/49264020.html" target="_blank">东北户外小月</a></h4>
                <span>Lv.18</span>
                <em>2021-12-31 16:08:38</em>
                <div class="clear"></div>
                <p>
                  《自由行散客之家》--微信1368813870<br />
                  哈尔滨一 亚布力一滑雪一冰雪一画廊一风车山庄一龙江第一峰一雪乡一长白山 一雾凇岛<br />
                  篝火晚会.扭秧歌队<br />
                  雪地.摩托拍摄日出<br />
                  免费线路设计.<br />
                  滑雪·散客·自由行<br />
                  不会让你多走一点冤枉路。<br />
                  散客自发组织游玩
                </p>
                <div class="clear"></div>
                <div class="opatation">
                  <div class="clear"></div>
                </div>
              </div>
            </li>
            <div class="clear"></div>
          </ul>
          <div class="page-container">
            <el-pagination class="page" background layout="total, prev, pager, next" :total="1000" />
          </div>
        </form>
      </div>
    </div>
    <div class="clear"></div>
  </div>
</template>
<script setup lang="ts">
const route = useRoute()
// console.log(route.params)
const id = route.params.id // 攻略Id
const srcList = ref([
  'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
  'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
  'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
  'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
  'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
  'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
  'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg'
])
</script>
<style lang="scss" scoped>
.details-container {
  width: 1000px;
  margin: 15px auto 0;
  .site_nav {
    height: 30px;
    clear: both;
    overflow: hidden;
    margin-top: 10px;
    .crumb {
      float: left;
      color: #666;
      font-size: 12px;
      line-height: 30px;
      a {
        color: #b5600d;
        font-size: 12px;
        &:hover {
          outline: 0;
          text-decoration: underline;
        }
      }
      h1 {
        display: inline;
        font-size: 12px;
        font-weight: normal;
      }
    }
  }
  .mdd_img {
    float: left;
    height: 325px;
    width: 230px;
    margin-top: 10px;
    overflow: hidden;
  }
  .middle_de {
    width: 512px;
    float: left;
    margin-left: 30px;
    display: inline;
    h1 {
      font-size: 28px;
      font-weight: normal;
      color: #444444;
      line-height: 30px;
      margin-top: 6px;
    }
    .gl_title {
      margin-top: 8px;
      span {
        float: left;
        font-size: 16px;
        color: #666;
        line-height: 18px;
        white-space: nowrap;
        margin-right: 10px;
        margin-top: 10px;
      }
    }
    .jianjie {
      width: 512px;
      background: #f3f3f3;
      padding: 14px 0px;
      margin-top: 15px;
      p {
        line-height: 24px;
        width: 468px;
        margin: 0px auto;
        color: #666;
        strong {
          color: #444444;
        }
      }
    }
    .th_f {
      margin-top: 10px;
      p {
        color: #666;
        line-height: 26px;
      }
    }
    .feng_list {
      margin-top: -5px;
      a {
        border: 1px #bebebe solid;
        float: left;
        height: 18px;
        width: 18px;
        margin-top: 10px;
        margin-right: 8px;
        overflow: hidden;
        img {
          vertical-align: top;
          margin-top: 1px;
          margin-left: 1px;
        }
      }
    }
  }
  .down_glb {
    float: right;
    width: 170px;
    h2 {
      font-size: 22px;
      font-weight: normal;
      color: #666;
      line-height: 22px;
      margin-top: 48px;
      span {
        font-size: 12px;
      }
    }
    .down_p {
      margin-top: 15px;
      a {
        display: block;
        height: 58px;
        width: 170px;
        background: #92bf48;
        font-size: 20px;
        color: #fff;
        line-height: 58px;
        text-align: center;
        border-radius: 5px;
      }
      p {
        text-align: center;
        color: #666;
        line-height: 14px;
        margin-top: 12px;
      }
    }
    .down_p1 {
      margin-top: 20px;
      a {
        background: #54b4e6;
      }
    }
    .up_time {
      height: 28px;
      width: 170px;
      background: #f1f1f1;
      margin-top: 30px;
      border-radius: 30px;
      p {
        line-height: 28px;
        color: #666;
        text-align: center;
      }
    }
  }
  .box_wrap {
    width: 980px;
    margin-top: 40px;
    white-space: nowrap;
    overflow-x: scroll;
    .img-item {
      height: 195px;
      width: 138px;
      margin-right: 30px;
      margin-bottom: 20px;
    }
  }
  .gl_l {
    width: 302px;
    float: left;
    margin-top: 30px;
    padding-bottom: 20px;
    .mdd_zj {
      width: 300px;
      background: #f3f3f3;
      padding-bottom: 22px;
      h1 {
        border-bottom: 1px #e3e3e3 solid;
        font-size: 14px;
        color: #666;
        line-height: 16px;
        width: 270px;
        padding: 10px 0px;
        margin: 0px auto;
      }
      .mdd_m {
        margin-top: 22px;
        h2 {
          float: left;
          height: 90px;
          width: 140px;
          margin-left: 15px;
          display: inline;
          overflow: hidden;
        }
        dl {
          width: 115px;
          float: left;
          margin-left: 15px;
          display: inline;
          dt {
            font-size: 22px;
            color: #666;
            line-height: 24px;
            height: 24px;
            width: 115px;
            overflow: hidden;
            margin-top: 8px;
            margin-bottom: 15px;
            a {
              color: #ffa800;
              &:hover {
                outline: 0;
                text-decoration: underline;
              }
            }
          }
          dd {
            line-height: 14px;
            margin-top: 6px;
            a {
              color: #ffa800;
              &:hover {
                outline: 0;
                text-decoration: underline;
              }
            }
          }
        }
      }
    }
    img {
      vertical-align: inherit;
    }
    .just_down {
      margin-top: 40px;
      h2 {
        font-size: 14px;
        font-weight: normal;
        color: #666;
        line-height: 16px;
      }
      ul {
        float: left;
        margin-top: 10px;
        li {
          width: 136px;
          height: 20px;
          float: left;
          margin-right: 8px;
          margin-top: 10px;
          display: inline;
          overflow: hidden;
          h3 {
            float: left;
            border: 1px #bebebe solid;
            height: 18px;
            width: 18px;
            a {
              height: 16px;
              width: 16px;
              display: block;
              overflow: hidden;
              margin-left: 1px;
              margin-top: 1px;
            }
          }
          p {
            float: left;
            margin-left: 4px;
            display: inline;
            line-height: 21px;
            a {
              color: #ffa800;
              &:hover {
                outline: 0;
                text-decoration: underline;
              }
            }
          }
          span {
            float: left;
            color: #666;
            margin-left: 4px;
            line-height: 21px;
          }
        }
      }
    }
    .ff_menu {
      width: 302px;
      margin-top: 8px;
      overflow: hidden;
      a {
        border: 1px #bebebe solid;
        float: left;
        height: 18px;
        width: 18px;
        margin-right: 8px;
        margin-top: 12px;
        overflow: hidden;
        &:hover {
          border: 1px #ffa800 solid;
        }
        img {
          margin-left: 1px;
          margin-top: 1px;
        }
      }
    }
  }
  .gl_r {
    width: 640px;
    float: right;
    margin-top: 30px;
    .guess_like {
      margin-top: -2px;
      h2 {
        float: left;
        font-size: 14px;
        color: #666;
        line-height: 16px;
      }
      a {
        float: right;
        color: #ffa800;
        line-height: 14px;
        margin-top: 2px;
        margin-right: 5px;
      }
    }
    .gl_fw {
      border-bottom: 1px #e4e4e4 dotted;
      width: 980px;
      overflow: hidden;
      padding-bottom: 25px;
      margin-top: 25px;
      &.gl_fw1 {
        width: 640px;
        border-bottom: 1px #e3e3e3 solid;
      }
      .gl_cw {
        width: 1020px;
        &.gl_cw1 {
          width: 680px;
        }
        .gl_list {
          width: 130px;
          float: left;
          margin-right: 40px;
          a {
            display: block;
            height: 184px;
            width: 130px;
            overflow: hidden;
          }
          .update_time {
            margin-top: 5px;
            text-align: center;
            font-size: 10px;
          }
          .down_cout {
            height: 24px;
            width: 130px;
            background: #ebebeb;
            border-radius: 30px;
            margin-top: 5px;
            position: relative;
            span {
              display: block;
              position: absolute;
              top: 0px;
              left: 0px;
              height: 24px;
              width: 24px;
              background: url(../../assets/images/new-gl-icon6@2x.png) -20px -90px no-repeat;
              background-size: 60px auto;
            }
            p {
              line-height: 24px;
              color: #666;
              padding-left: 30px;
            }
          }
        }
      }
    }
    .msg_wp {
      margin-top: 40px;
      h1 {
        font-size: 14px;
        color: #666;
        line-height: 16px;
      }
      .msg_text {
        margin-top: 20px;
        textarea {
          border: 1px #d2d2d2 solid;
          height: 62px;
          width: 542px;
          padding-left: 10px;
          padding-top: 8px;
          float: left;
          resize: none;
          overflow-x: hidden;
          overflow-y: hidden;
          font-size: 12px;
          color: #878787;
          font-family: 'Microsoft Yahei', Tahoma, Arial, Helvetica, STHeiti;
          border-radius: 5px;
        }
        a {
          float: right;
          height: 72px;
          width: 70px;
          background: #c6c6c6;
          font-size: 20px;
          color: #fff;
          line-height: 70px;
          text-align: center;
          border-radius: 5px;
        }
        input.check_in {
          float: left;
          margin-top: 7px;
        }
        span {
          float: left;
          color: #666;
          line-height: 14px;
          margin-top: 6px;
        }
        input.pages_in {
          width: 40px;
          text-align: center;
          height: 15px;
          color: #666;
          border: 1px solid rgb(118, 118, 118);
        }
      }
      .question {
        margin-top: 20px;
        padding-bottom: 12px;
        background: #f6f6f6;
        span {
          float: left;
          font-size: 14px;
          color: #ff8a00;
          line-height: 14px;
          margin-left: 20px;
          margin-top: 12px;
        }
        .question_link {
          height: 25px;
          width: 520px;
          float: left;
          margin-top: 3px;
          margin-left: 30px;
          display: inline;
          overflow: hidden;
          a {
            float: left;
            color: #666666;
            line-height: 14px;
            white-space: nowrap;
            margin: 10px 20px 5px 0;
          }
        }
        .more_toggle a {
          display: block;
          width: 42px;
          height: 16px;
          background: url(../../../assets/images/ms.png) 0px 0px no-repeat;
          text-indent: -10000px;
          overflow: hidden;
        }
      }
      .wall_caution {
        padding: 10px 0px;
        text-align: center;
        background-color: #fff8dc;
        color: #ff4500;
      }
      ul {
        margin-top: 15px;
        li {
          border-bottom: 1px #dbdbdb solid;
          width: 640px;
          float: left;
          padding-bottom: 10px;
          h3 {
            float: left;
            height: 48px;
            width: 48px;
            margin-top: 10px;
            overflow: hidden;
          }
          .e_con {
            width: 575px;
            float: left;
            margin-left: 15px;
            display: inline;
            position: relative;
            h4 {
              float: left;
              font-weight: normal;
              line-height: 14px;
              margin-top: 15px;
              a {
                color: #fea901;
              }
            }
            span {
              float: left;
              color: #ca2426;
              margin-left: 6px;
              line-height: 14px;
              margin-top: 15px;
            }
            em {
              float: left;
              font-style: normal;
              color: #9a9a9a;
              margin-left: 20px;
              line-height: 14px;
              margin-top: 15px;
            }
            p {
              width: 455px;
              float: left;
              color: #666;
              line-height: 20px;
              margin-top: 6px;
            }
            .opatation {
              width: 102px;
              position: absolute;
              z-index: 20;
              bottom: 2px;
              right: 0px;
            }
          }
        }
      }
      .page-container {
        margin-top: 15px;
        text-align: right;
        .page {
          display: inline-flex;
        }
      }
    }
  }
}
</style>
